<template>
  <el-dialog :before-close="hide" :title="title" :visible="visible" width="500px">
    <el-form :model="role" label-width="80px" ref="roleMsg" :rules="rules">
      <el-form-item label="角色名称" prop="roleName">
        <el-input v-model="role.roleName"></el-input>
      </el-form-item>
      <el-form-item label="描述" prop="roleName">
        <el-input v-model="role.description"></el-input>
      </el-form-item>
    </el-form>
    <span slot="footer" class="dialog-footer">
      <el-button @click="hide">取 消</el-button>
      <el-button type="primary" @click="confirm">确 定</el-button>
    </span>
  </el-dialog>
</template>


<script>
export default {
  data () {
    const validate = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('不能为空'))
      } else {
        callback()
      }
    }

    return {
      role: {},
      title: '',
      rules: {
        roleName: [{required: true, message: '角色名不能为空', trigger: 'blur'}],
        description: [{equired: true, message: '描述不能为空', trigger: 'blur'}]
      },
      visible: false
    }
  },
  methods: {
    createRole () {
      this.role = {}
      this.title = '创建角色'
      this.visible = true
    },
    editRole (id, roleName, description) {
      this.role = {id, roleName, description}
      this.title = '修改角色'
      this.visible = true
    },
    hide () {
      this.visible = false
    },
    confirm () {
      this.$refs.roleMsg.validate(valid => {
        if (valid) {
          this.$emit('confirm', this.role)
          this.visible = false
        }
      })
    }
    // ,
    // _showRoleMsgBox (title) {
    //   const h = this.$createElement
    //   const key = Date.now()
    //   this.$msgbox({
    //     title,
    //     message: h('el-form', {
    //       props: {
    //         model: this.role,
    //         rules: this.rules
    //       },
    //       attrs: {
    //         'label-width': '80'
    //       },
    //       ref: 'roleMsg'
    //     }, [
    //       h('el-form-item', {
    //         attrs: {
    //           label: '角色名称',
    //           prop: 'roleName'
    //         }
    //       }, [
    //         h('el-input', {
    //           attrs: {
    //             placeholder: '角色名称',
    //             value: this.role.roleName
    //           },
    //           on: {
    //             input: value => {
    //               this.role.roleName = value
    //             }
    //           },
    //           ref: 'roleName',
    //           key
    //         })
    //       ]),
    //       h('el-form-item', {
    //         attrs: {
    //           label: '描述',
    //           prop: 'description'
    //         }
    //       }, [
    //         h('el-input', {
    //           attrs: {
    //             placeholder: '描述',
    //             value: this.role.description
    //           },
    //           on: {
    //             input: value => {
    //               this.role.description = value
    //             }
    //           },
    //           ref: 'description',
    //           key
    //         })
    //       ]),
    //     ]),
    //     showCancelButton: true,
    //     confirmButtonText: '确定',
    //     cancelButtonText: '取消',
    //     beforeClose: (action, instance, done) => {
    //       if (action === 'confirm') {
    //         this.$refs.roleMsg.validate(valid => {
    //           console.log(valid)
    //         })
    //         return
    //         this.$emit('confirm', this.role)
    //       }
    //       done()
    //     }
    //   }).catch(e => {
    //     if (e === 'cancel') {
    //       return
    //     }
    //   })
    // }
  }
}
</script>


<style scoped>

</style>
